Motion >> Repos - motion-next.git/blob

   1 <div
   2   id="integrations-zohoAccount"
   3   class="page-layout simple tabbed"
   4   layout="column"
   5 >
   6   <!-- HEADER -->
   7   <div class="header md-accent-bg" layout="row" layout-align="start center">
   8     <div class="white-fg" layout="row" layout-align="start center" flex>
   9       <md-button
  10         class="goto-zohoAccounts-button md-icon-button"
  11         aria-label="Go to zohoAccounts"
  12         ng-click="vm.gotoZohoAccounts()"
  13         translate
  14         translate-attr-aria-label="INTEGRATIONS.GO_TO_ZOHOACCOUNTS"
  15       >
  16         <md-icon md-font-icon="icon-arrow-left"></md-icon>
  17       </md-button>
  18
  19       <div layout="row" layout-align="start center">
  20         <div class="zohoAccount-image" hide-xs>
  21           <img ng-src="assets/images/business/zohoAccounts.jpg" />
  22         </div>
  23
  24         <div layout="column" layout-align="start start">
  25           <div class="h2">
  26             #{{vm.zohoAccount.id}}
  27             <span ng-if="vm.zohoAccount.name">{{vm.zohoAccount.name}}</span>
  28           </div>
  29           <div class="subtitle secondary-text">
  30             <span translate="INTEGRATIONS.CREATED_AT"></span>
  31             <span>{{vm.zohoAccount.createdAt | date:'medium'}}</span>
  32           </div>
  33         </div>
  34       </div>
  35     </div>
  36     <div>
  37       <md-button
  38         type="submit"
  39         ng-click="vm.saveZohoAccount()"
  40         ng-if="vm.crudPermissions.canEdit"
  41         class="send-button md-accent md-raised"
  42         ng-disabled="(generalForm.$invalid) || (configurationsForm.$invalid)"
  43         translate="INTEGRATIONS.SAVE"
  44         translate-attr-aria-label="INTEGRATIONS.SAVE"
  45       >
  46         SAVE
  47       </md-button>
  48     </div>
  49   </div>
  50   <!-- / HEADER -->
  51
  52   <!-- CONTENT -->
  53   <div class="content">
  54     <md-tabs
  55       md-selected="vm.selectedTab"
  56       md-stretch-tabs="always"
  57       flex
  58       layout-fill
  59       md-dynamic-height
  60     >
  61       <md-tab>
  62         <md-tab-label>
  63           <span translate="INTEGRATIONS.ACCOUNT">ACCOUNT</span>
  64         </md-tab-label>
  65         <md-tab-body>
  66           <div
  67             class="zohoAccount-detail-form-container general md-background-bg md-whiteframe-1dp"
  68           >
  69             <div class="pb-16" layout="row" layout-align="start center">
  70               <div class="h2 secondary-text" translate="INTEGRATIONS.GENERAL">
  71                 GENERAL
  72               </div>
  73             </div>
  74             <form name="generalForm" novalidate>
  75               <md-input-container class="md-block">
  76                 <label translate="INTEGRATIONS.NAME">Name</label>
  77                 <input
  78                   type="text"
  79                   name="name"
  80                   ng-model="vm.zohoAccount.name"
  81                   ng-required="true"
  82                   autofocus
  83                   ng-disabled="!vm.crudPermissions.canEdit"
  84                 />
  85
  86                 <div
  87                   ng-messages="generalForm['name'].$error"
  88                   ng-show="generalForm['name'].$touched"
  89                   role="alert"
  90                 >
  91                   <div ng-message="required">
  92                     <span translate="INTEGRATIONS.ERRORS.NAME_REQUIRED"
  93                       >Name field is required</span
  94                     >
  95                   </div>
  96                 </div>
  97               </md-input-container>
  98               <md-input-container class="md-block">
  99                 <label translate="INTEGRATIONS.HOST">Host</label>
 100                 <md-select
 101                   name="host"
 102                   ng-model="vm.zohoAccount.host"
 103                   required
 104                   ng-disabled="!vm.crudPermissions.canEdit"
 105                 >
 106                   <md-option ng-value="'zoho.com'">zoho.com</md-option>
 107                   <md-option ng-value="'zoho.eu'">zoho.eu</md-option>
 108                 </md-select>
 109                 <div
 110                   ng-messages="generalForm['host'].$error"
 111                   ng-show="generalForm['host'].$touched"
 112                   role="alert"
 113                 >
 114                   <div ng-message="required">
 115                     <span translate="INTEGRATIONS.ERRORS.HOST_REQUIRED"
 116                       >Host field is required</span
 117                     >
 118                   </div>
 119                 </div>
 120               </md-input-container>
 121               <md-input-container class="md-block">
 122                 <label translate="INTEGRATIONS.ZONE">Zone</label>
 123                 <md-select
 124                   name="zone"
 125                   ng-model="vm.zohoAccount.zone"
 126                   required
 127                   ng-disabled="!vm.crudPermissions.canEdit"
 128                 >
 129                   <md-option ng-value="'US'">US</md-option>
 130                   <md-option ng-value="'AU'">AU</md-option>
 131                   <md-option ng-value="'EU'">EU</md-option>
 132                   <md-option ng-value="'IN'">IN</md-option>
 133                   <md-option ng-value="'CN'">CN</md-option>
 134                 </md-select>
 135                 <div class="hint">
 136                   <span translate="INTEGRATIONS.HELP.ZONE"></span>
 137                 </div>
 138                 <div
 139                   ng-messages="generalForm['zone'].$error"
 140                   ng-show="generalForm['zone'].$touched"
 141                   role="alert"
 142                 >
 143                   <div ng-message="required">
 144                     <span translate="INTEGRATIONS.ERRORS.ZONE_REQUIRED"
 145                       >Zone field is required</span
 146                     >
 147                   </div>
 148                 </div>
 149               </md-input-container>
 150               <md-input-container class="md-block">
 151                 <label translate="INTEGRATIONS.CLIENTID">ClientId</label>
 152                 <input
 153                   type="text"
 154                   name="clientId"
 155                   ng-model="vm.zohoAccount.clientId"
 156                   ng-required="true"
 157                   ng-disabled="!vm.crudPermissions.canEdit"
 158                 />
 159
 160                 <div class="hint">
 161                   <span translate="INTEGRATIONS.HELP.CLIENTID"></span>
 162                 </div>
 163                 <div
 164                   ng-messages="generalForm['clientId'].$error"
 165                   ng-show="generalForm['clientId'].$touched"
 166                   role="alert"
 167                 >
 168                   <div ng-message="required">
 169                     <span translate="INTEGRATIONS.ERRORS.CLIENTID_REQUIRED"
 170                       >ClientId field is required</span
 171                     >
 172                   </div>
 173                 </div>
 174               </md-input-container>
 175               <md-input-container class="md-block">
 176                 <label translate="INTEGRATIONS.CLIENTSECRET"
 177                   >ClientSecret</label
 178                 >
 179                 <input
 180                   type="text"
 181                   name="clientSecret"
 182                   ng-model="vm.zohoAccount.clientSecret"
 183                   ng-required="true"
 184                   ng-disabled="!vm.crudPermissions.canEdit"
 185                 />
 186
 187                 <div class="hint">
 188                   <span translate="INTEGRATIONS.HELP.CLIENTSECRET"></span>
 189                 </div>
 190                 <div
 191                   ng-messages="generalForm['clientSecret'].$error"
 192                   ng-show="generalForm['clientSecret'].$touched"
 193                   role="alert"
 194                 >
 195                   <div ng-message="required">
 196                     <span translate="INTEGRATIONS.ERRORS.CLIENTSECRET_REQUIRED"
 197                       >ClientSecret field is required</span
 198                     >
 199                   </div>
 200                 </div>
 201               </md-input-container>
 202               <md-input-container class="md-block">
 203                 <label translate="INTEGRATIONS.CODE">Code</label>
 204                 <input
 205                   type="text"
 206                   name="code"
 207                   ng-model="vm.zohoAccount.code"
 208                   ng-required="true"
 209                   ng-disabled="!vm.crudPermissions.canEdit"
 210                 />
 211
 212                 <div class="hint">
 213                   <span translate="INTEGRATIONS.HELP.CODE"></span>
 214                 </div>
 215                 <div
 216                   ng-messages="generalForm['code'].$error"
 217                   ng-show="generalForm['code'].$touched"
 218                   role="alert"
 219                 >
 220                   <div ng-message="required">
 221                     <span translate="INTEGRATIONS.ERRORS.CODE_REQUIRED"
 222                       >Code field is required</span
 223                     >
 224                   </div>
 225                 </div>
 226               </md-input-container>
 227               <md-input-container class="md-block">
 228                 <label translate="INTEGRATIONS.REFRESHTOKEN"
 229                   >RefreshToken</label
 230                 >
 231                 <input
 232                   type="text"
 233                   name="refreshToken"
 234                   ng-model="vm.zohoAccount.refreshToken"
 235                   disabled
 236                 />
 237
 238                 <div class="hint">
 239                   <span translate="INTEGRATIONS.HELP.REFRESHTOKEN"></span>
 240                 </div>
 241                 <div
 242                   ng-messages="generalForm['refreshToken'].$error"
 243                   ng-show="generalForm['refreshToken'].$touched"
 244                   role="alert"
 245                 >
 246                   <div ng-message="required">
 247                     <span translate="INTEGRATIONS.ERRORS.REFRESHTOKEN_REQUIRED"
 248                       >RefreshToken field is required</span
 249                     >
 250                   </div>
 251                 </div>
 252               </md-input-container>
 253               <md-input-container class="md-block">
 254                 <label translate="INTEGRATIONS.MOTIONPROXYADDRESS"
 255                   >MotionProxyAddress</label
 256                 >
 257                 <input
 258                   type="url"
 259                   name="serverUrl"
 260                   ng-model="vm.zohoAccount.serverUrl"
 261                   ng-disabled="!vm.crudPermissions.canEdit"
 262                 />
 263
 264                 <div class="hint">
 265                   <span translate="INTEGRATIONS.HELP.MOTIONPROXYADDRESS"></span>
 266                 </div>
 267                 <div
 268                   ng-messages="generalForm['serverUrl'].$error"
 269                   ng-show="generalForm['serverUrl'].$touched"
 270                   role="alert"
 271                 >
 272                   <div ng-message="required">
 273                     <span
 274                       translate="INTEGRATIONS.ERRORS.MOTIONPROXYADDRESS_REQUIRED"
 275                       >MotionProxyAddress field is required</span
 276                     >
 277                   </div>
 278                   <div ng-message="url">
 279                     <span
 280                       translate="INTEGRATIONS.ERRORS.MOTIONPROXYADDRESS_MUST_VALID_URL"
 281                       >MotionProxyAddress must be a valid url
 282                       http://www.xcally.com</span
 283                     >
 284                   </div>
 285                 </div>
 286               </md-input-container>
 287               <md-input-container class="md-block">
 288                 <label translate="INTEGRATIONS.DESCRIPTION">Description</label>
 289                 <input
 290                   type="text"
 291                   name="description"
 292                   ng-model="vm.zohoAccount.description"
 293                   ng-disabled="!vm.crudPermissions.canEdit"
 294                 />
 295
 296                 <div
 297                   ng-messages="generalForm['description'].$error"
 298                   ng-show="generalForm['description'].$touched"
 299                   role="alert"
 300                 >
 301                   <div ng-message="required">
 302                     <span translate="INTEGRATIONS.ERRORS.DESCRIPTION_REQUIRED"
 303                       >Description field is required</span
 304                     >
 305                   </div>
 306                 </div>
 307               </md-input-container>
 308             </form>
 309           </div>
 310         </md-tab-body>
 311       </md-tab>
 312       <md-tab>
 313         <md-tab-label>
 314           <span translate="INTEGRATIONS.CONFIGURATIONS">CONFIGURATIONS</span>
 315         </md-tab-label>
 316         <md-tab-body>
 317           <div
 318             class="zohoAccount-detail-form-container configurations md-background-bg md-whiteframe-1dp"
 319           >
 320             <div class="pb-16" layout="row" layout-align="start center">
 321               <div
 322                 class="h2 secondary-text"
 323                 translate="INTEGRATIONS.CONFIGURATIONS"
 324               >
 325                 CONFIGURATIONS
 326               </div>
 327             </div>
 328             <div
 329               ng-controller="ZohoAccountConfigurationsController as vm_cc"
 330               ng-init="vm_cc.init(vm.zohoAccount, vm.crudPermissions)"
 331               layout="row"
 332             >
 333               <md-card class="md-whiteframe-1dp" flex="30">
 334                 <div layout="row" layout-align="center center">
 335                   <md-subheader flex="75" class="md-no-sticky"
 336                     >{{ 'INTEGRATIONS.CONFIGURATIONS' | translate
 337                     }}</md-subheader
 338                   >
 339                   <md-button
 340                     flex="25"
 341                     ng-if="vm_cc.crudPermissions.canEdit"
 342                     ng-click="vm_cc.createOrEditZohoConfiguration($event)"
 343                     class="md-icon-button"
 344                     aria-label="create zohoConfiguration"
 345                   >
 346                     <md-icon md-font-icon="icon-plus"></md-icon>
 347                   </md-button>
 348                 </div>
 349                 <md-list>
 350                   <md-list-item
 351                     layout="row"
 352                     layout-align="center center"
 353                     ng-repeat="zohoConfiguration in vm_cc.configurations"
 354                     class="border-top"
 355                     md-colors="{background: (vm_cc.selectedZohoConfiguration == $index ? 'accent' : 'grey-A100')}"
 356                     ng-click="vm_cc.getZohoConfiguration($index)"
 357                   >
 358                     <span class="text-truncate" flex="80"
 359                       >{{ zohoConfiguration.name }}</span
 360                     >
 361                     <md-menu ng-if="vm_cc.crudPermissions.canDelete">
 362                       <md-button
 363                         class="md-icon-button"
 364                         aria-label="More"
 365                         translate
 366                         translate-attr-aria-label="INTEGRATIONS.MORE"
 367                         ng-click="$mdOpenMenu($event)"
 368                       >
 369                         <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 370                       </md-button>
 371                       <md-menu-content width="3">
 372                         <md-menu-item ng-if="vm_cc.crudPermissions.canDelete">
 373                           <md-button
 374                             ng-click="vm_cc.deleteZohoConfiguration($event, zohoConfiguration)"
 375                             translate="INTEGRATIONS.DELETE_ZOHOCONFIGURATION"
 376                           >
 377                             Delete ZohoConfiguration
 378                           </md-button>
 379                         </md-menu-item>
 380                       </md-menu-content>
 381                     </md-menu>
 382                   </md-list-item>
 383                 </md-list>
 384               </md-card>
 385               <div flex></div>
 386               <md-card class="md-whiteframe-1dp" flex="65">
 387                 <md-tabs ng-if="vm_cc.configurations.length" md-dynamic-height>
 388                   <md-tab>
 389                     <md-tab-label>
 390                       <span translate="INTEGRATIONS.SUBJECTS">SUBJECTS</span>
 391                     </md-tab-label>
 392                     <md-tab-body>
 393                       <md-toolbar
 394                         class="md-table-toolbar md-default no-padding"
 395                         ng-hide="vm_cc.selectedSubjects.length"
 396                       >
 397                         <div class="md-toolbar-tools">
 398                           <div flex></div>
 399                           <ms-search-bar
 400                             on-search="vm_cc.query.subject = query"
 401                             on-collapse="vm_cc.query.subject = undefined"
 402                             debounce="300"
 403                           ></ms-search-bar>
 404                           <md-button
 405                             ng-if="vm_cc.crudPermissions.canEdit"
 406                             class="md-icon-button"
 407                             ng-click="vm_cc.createOrEditSubject($event)"
 408                             aria-label="add subject"
 409                             translate
 410                             translate-attr-label="INTEGRATIONS.ADD_SUBJECT"
 411                           >
 412                             <md-icon md-font-icon="icon-plus"></md-icon>
 413                           </md-button>
 414                         </div>
 415                       </md-toolbar>
 416                       <md-toolbar
 417                         class="md-table-toolbar md-accent"
 418                         ng-show="vm_cc.selectedSubjects.length"
 419                       >
 420                         <div class="md-toolbar-tools">
 421                           <span class="md-subhead"
 422                             >{{vm_cc.selectedSubjects.length}}
 423                             {{vm_cc.selectedSubjects.length > 1 ? 'items' :
 424                             'item'}} selected</span
 425                           >
 426                           <div flex></div>
 427                           <md-button
 428                             ng-if="vm_cc.crudPermissions.canDelete"
 429                             class="md-icon-button"
 430                             ng-click="vm_cc.deleteSelectedSubjects($event)"
 431                             aria-label="delete selected"
 432                             translate
 433                             translate-attr-label="INTEGRATIONS.DELETE_SELECTED"
 434                           >
 435                             <md-icon md-font-icon="icon-delete"></md-icon>
 436                           </md-button>
 437                         </div>
 438                       </md-toolbar>
 439                       <md-table-container
 440                         class="md-whiteframe-1dp padding-horizontal"
 441                       >
 442                         <table
 443                           md-table
 444                           md-row-select
 445                           multiple
 446                           ng-model="vm_cc.selectedSubjects"
 447                         >
 448                           <thead md-head>
 449                             <tr md-row>
 450                               <th md-column>
 451                                 {{ 'INTEGRATIONS.ID' | translate }}
 452                               </th>
 453                               <th md-column>
 454                                 {{ 'INTEGRATIONS.TYPE' | translate }}
 455                               </th>
 456                               <th md-column>
 457                                 {{ 'INTEGRATIONS.CONTENT' | translate }}
 458                               </th>
 459                               <th md-column width="10px"></th>
 460                             </tr>
 461                           </thead>
 462                           <tbody md-body>
 463                             <tr
 464                               md-row
 465                               md-select="subject"
 466                               md-select-id="id"
 467                               ng-repeat="subject in vm_cc.subjects | filter: vm_cc.query.subject"
 468                             >
 469                               <td
 470                                 ng-click="vm_cc.createOrEditSubject($event, subject)"
 471                                 md-cell
 472                                 class="id"
 473                               >
 474                                 {{subject.id}}
 475                               </td>
 476                               <td
 477                                 ng-click="vm_cc.createOrEditSubject($event, subject)"
 478                                 md-cell
 479                                 class="type"
 480                               >
 481                                 <span ng-if="subject.FieldId"
 482                                   >{{subject.nameField ||
 483                                   subject.idField}}</span
 484                                 >
 485                                 <span ng-if="!subject.FieldId"
 486                                   >{{subject.type}}</span
 487                                 >
 488                               </td>
 489                               <td
 490                                 ng-switch="subject.type"
 491                                 ng-click="vm_cc.createOrEditSubject($event, subject)"
 492                                 md-cell
 493                               >
 494                                 <span ng-switch-when="string"
 495                                   >{{subject.content}}</span
 496                                 >
 497                                 <span
 498                                   ng-switch-when="variable"
 499                                   class="text-boxed"
 500                                   >{{subject.variableName}}</span
 501                                 >
 502                                 <span
 503                                   ng-switch-when="customVariable"
 504                                   class="text-boxed"
 505                                   >{{
 506                                   vm_cc.variablesById[subject.VariableId].name
 507                                   }}</span
 508                                 >
 509                                 <span ng-switch-when="keyValue">
 510                                   {{subject.key}}
 511                                   <span ng-switch="description.keyType">
 512                                     <span ng-switch-when="string"
 513                                       >{{subject.keyContent}}</span
 514                                     >
 515                                     <span
 516                                       ng-switch-when="variable"
 517                                       class="text-boxed"
 518                                       >{{subject.variableName}}</span
 519                                     >
 520                                     <span
 521                                       ng-switch-when="customVariable"
 522                                       class="text-boxed"
 523                                       >{{
 524                                       vm_cc.variablesById[subject.VariableId].name
 525                                       }}</span
 526                                     >
 527                                   </span>
 528                                 </span>
 529                                 <span ng-switch-default
 530                                   >{{subject.content}}</span
 531                                 >
 532                               </td>
 533                               <td
 534                                 md-cell
 535                                 class="actions"
 536                                 ng-if="!vm_cc.crudPermissions.readOnly"
 537                               >
 538                                 <md-menu>
 539                                   <md-button
 540                                     class="md-icon-button"
 541                                     aria-label="More"
 542                                     translate
 543                                     translate-attr-aria-label="INTEGRATIONS.MORE"
 544                                     ng-click="$mdOpenMenu($event)"
 545                                   >
 546                                     <md-icon
 547                                       md-font-icon="icon-dots-vertical"
 548                                     ></md-icon>
 549                                   </md-button>
 550
 551                                   <md-menu-content width="3">
 552                                     <md-menu-item
 553                                       ng-if="vm_cc.crudPermissions.canEdit"
 554                                     >
 555                                       <md-button
 556                                         ng-click="vm_cc.createOrEditSubject($event, subject)"
 557                                         translate="INTEGRATIONS.EDIT_SUBJECT"
 558                                       >
 559                                         Edit Subject
 560                                       </md-button>
 561                                     </md-menu-item>
 562                                     <md-menu-item
 563                                       ng-if="vm_cc.crudPermissions.canDelete"
 564                                     >
 565                                       <md-button
 566                                         ng-click="vm_cc.deleteSubjectConfirm($event, subject)"
 567                                         translate="INTEGRATIONS.DELETE_SUBJECT"
 568                                       >
 569                                         Delete Subject
 570                                       </md-button>
 571                                     </md-menu-item>
 572                                   </md-menu-content>
 573                                 </md-menu>
 574                               </td>
 575                             </tr>
 576                           </tbody>
 577                         </table>
 578                       </md-table-container>
 579                     </md-tab-body>
 580                   </md-tab>
 581
 582                   <md-tab>
 583                     <md-tab-label>
 584                       <span translate="INTEGRATIONS.DESCRIPTIONS"
 585                         >DESCRIPTIONS</span
 586                       >
 587                     </md-tab-label>
 588                     <md-tab-body>
 589                       <md-toolbar
 590                         class="md-table-toolbar md-default no-padding"
 591                         ng-hide="vm_cc.selectedDescriptions.length"
 592                       >
 593                         <div class="md-toolbar-tools">
 594                           <div flex></div>
 595                           <ms-search-bar
 596                             on-search="vm_cc.query.description = query"
 597                             on-collapse="vm_cc.query.description = undefined"
 598                             debounce="300"
 599                           ></ms-search-bar>
 600                           <md-button
 601                             ng-if="vm_cc.crudPermissions.canEdit"
 602                             class="md-icon-button"
 603                             ng-click="vm_cc.createOrEditDescription($event)"
 604                             aria-label="add description"
 605                             translate
 606                             translate-attr-label="INTEGRATIONS.ADD_DESCRIPTION"
 607                           >
 608                             <md-icon md-font-icon="icon-plus"></md-icon>
 609                           </md-button>
 610                         </div>
 611                       </md-toolbar>
 612                       <md-toolbar
 613                         class="md-table-toolbar md-accent"
 614                         ng-show="vm_cc.selectedDescriptions.length"
 615                       >
 616                         <div class="md-toolbar-tools">
 617                           <span class="md-subhead"
 618                             >{{vm_cc.selectedDescriptions.length}}
 619                             {{vm_cc.selectedDescriptions.length > 1 ? 'items' :
 620                             'item'}} selected</span
 621                           >
 622                           <div flex></div>
 623                           <md-button
 624                             ng-if="vm_cc.crudPermissions.canDelete"
 625                             class="md-icon-button"
 626                             ng-click="vm_cc.deleteSelectedDescriptions($event)"
 627                             aria-label="delete selected"
 628                             translate
 629                             translate-attr-label="INTEGRATIONS.DELETE_SELECTED"
 630                           >
 631                             <md-icon md-font-icon="icon-delete"></md-icon>
 632                           </md-button>
 633                         </div>
 634                       </md-toolbar>
 635                       <md-table-container
 636                         class="md-whiteframe-1dp padding-horizontal"
 637                       >
 638                         <table
 639                           md-table
 640                           md-row-select
 641                           multiple
 642                           ng-model="vm_cc.selectedDescriptions"
 643                         >
 644                           <thead md-head>
 645                             <tr md-row>
 646                               <th md-column>
 647                                 {{ 'INTEGRATIONS.ID' | translate }}
 648                               </th>
 649                               <th md-column>
 650                                 {{ 'INTEGRATIONS.TYPE' | translate }}
 651                               </th>
 652                               <th md-column>
 653                                 {{ 'INTEGRATIONS.CONTENT' | translate }}
 654                               </th>
 655                               <th md-column width="10px"></th>
 656                             </tr>
 657                           </thead>
 658                           <tbody md-body>
 659                             <tr
 660                               md-row
 661                               md-select="description"
 662                               md-select-id="id"
 663                               ng-repeat="description in vm_cc.descriptions | filter: vm_cc.query.description"
 664                             >
 665                               <td
 666                                 ng-click="vm_cc.createOrEditDescription($event, description)"
 667                                 md-cell
 668                                 class="id"
 669                               >
 670                                 {{description.id}}
 671                               </td>
 672                               <td
 673                                 ng-click="vm_cc.createOrEditDescription($event, description)"
 674                                 md-cell
 675                                 class="type"
 676                               >
 677                                 <span ng-if="description.FieldId"
 678                                   >{{description.nameField ||
 679                                   description.idField}}</span
 680                                 >
 681                                 <span ng-if="!description.FieldId"
 682                                   >{{description.type}}</span
 683                                 >
 684                               </td>
 685                               <td
 686                                 ng-switch="description.type"
 687                                 ng-click="vm_cc.createOrEditDescription($event, description)"
 688                                 md-cell
 689                               >
 690                                 <span ng-switch-when="string"
 691                                   >{{description.content}}</span
 692                                 >
 693                                 <span
 694                                   ng-switch-when="variable"
 695                                   class="text-boxed"
 696                                   >{{description.variableName}}</span
 697                                 >
 698                                 <span
 699                                   ng-switch-when="customVariable"
 700                                   class="text-boxed"
 701                                   >{{
 702                                   vm_cc.variablesById[description.VariableId].name
 703                                   }}</span
 704                                 >
 705                                 <span ng-switch-when="keyValue">
 706                                   {{description.key}}
 707                                   <span ng-switch="description.keyType">
 708                                     <span ng-switch-when="string"
 709                                       >{{description.keyContent}}</span
 710                                     >
 711                                     <span
 712                                       ng-switch-when="variable"
 713                                       class="text-boxed"
 714                                       >{{description.variableName}}</span
 715                                     >
 716                                     <span
 717                                       ng-switch-when="customVariable"
 718                                       class="text-boxed"
 719                                       >{{
 720                                       vm_cc.variablesById[description.VariableId].name
 721                                       }}</span
 722                                     >
 723                                   </span>
 724                                 </span>
 725                                 <span ng-switch-default
 726                                   >{{description.content}}</span
 727                                 >
 728                               </td>
 729                               <td
 730                                 md-cell
 731                                 class="actions"
 732                                 ng-if="!vm_cc.crudPermissions.readOnly"
 733                               >
 734                                 <md-menu>
 735                                   <md-button
 736                                     class="md-icon-button"
 737                                     aria-label="More"
 738                                     translate
 739                                     translate-attr-aria-label="INTEGRATIONS.MORE"
 740                                     ng-click="$mdOpenMenu($event)"
 741                                   >
 742                                     <md-icon
 743                                       md-font-icon="icon-dots-vertical"
 744                                     ></md-icon>
 745                                   </md-button>
 746
 747                                   <md-menu-content width="3">
 748                                     <md-menu-item
 749                                       ng-if="vm_cc.crudPermissions.canEdit"
 750                                     >
 751                                       <md-button
 752                                         ng-click="vm_cc.createOrEditDescription($event, description)"
 753                                         translate="INTEGRATIONS.EDIT_DESCRIPTION"
 754                                       >
 755                                         Edit Description
 756                                       </md-button>
 757                                     </md-menu-item>
 758                                     <md-menu-item
 759                                       ng-if="vm_cc.crudPermissions.canDelete"
 760                                     >
 761                                       <md-button
 762                                         ng-click="vm_cc.deleteDescriptionConfirm($event, description)"
 763                                         translate="INTEGRATIONS.DELETE_DESCRIPTION"
 764                                       >
 765                                         Delete Description
 766                                       </md-button>
 767                                     </md-menu-item>
 768                                   </md-menu-content>
 769                                 </md-menu>
 770                               </td>
 771                             </tr>
 772                           </tbody>
 773                         </table>
 774                       </md-table-container>
 775                     </md-tab-body>
 776                   </md-tab>
 777
 778                   <md-tab>
 779                     <md-tab-label>
 780                       <span translate="INTEGRATIONS.FIELDS">FIELDS</span>
 781                     </md-tab-label>
 782                     <md-tab-body>
 783                       <md-toolbar
 784                         class="md-table-toolbar md-default no-padding"
 785                         ng-hide="vm_cc.selectedFields.length"
 786                       >
 787                         <div class="md-toolbar-tools">
 788                           <div flex></div>
 789                           <ms-search-bar
 790                             on-search="vm_cc.query.field = query"
 791                             on-collapse="vm_cc.query.field = undefined"
 792                             debounce="300"
 793                           ></ms-search-bar>
 794                           <md-button
 795                             ng-if="vm_cc.crudPermissions.canEdit"
 796                             class="md-icon-button"
 797                             ng-click="vm_cc.createOrEditField($event)"
 798                             aria-label="add field"
 799                             translate
 800                             translate-attr-label="INTEGRATIONS.ADD_FIELD"
 801                           >
 802                             <md-icon md-font-icon="icon-plus"></md-icon>
 803                           </md-button>
 804                         </div>
 805                       </md-toolbar>
 806                       <md-toolbar
 807                         class="md-table-toolbar md-accent"
 808                         ng-show="vm_cc.selectedFields.length"
 809                       >
 810                         <div class="md-toolbar-tools">
 811                           <span class="md-subhead"
 812                             >{{vm_cc.selectedFields.length}}
 813                             {{vm_cc.selectedFields.length > 1 ? 'items' :
 814                             'item'}} selected</span
 815                           >
 816                           <div flex></div>
 817                           <md-button
 818                             ng-if="vm_cc.crudPermissions.canDelete"
 819                             class="md-icon-button"
 820                             ng-click="vm_cc.deleteSelectedFields($event)"
 821                             aria-label="delete selected"
 822                             translate
 823                             translate-attr-label="INTEGRATIONS.DELETE_SELECTED"
 824                           >
 825                             <md-icon md-font-icon="icon-delete"></md-icon>
 826                           </md-button>
 827                         </div>
 828                       </md-toolbar>
 829                       <md-table-container
 830                         class="md-whiteframe-1dp padding-horizontal"
 831                       >
 832                         <table
 833                           md-table
 834                           md-row-select
 835                           multiple
 836                           ng-model="vm_cc.selectedFields"
 837                         >
 838                           <thead md-head>
 839                             <tr md-row>
 840                               <th md-column>
 841                                 {{ 'INTEGRATIONS.ID' | translate }}
 842                               </th>
 843                               <th md-column>
 844                                 {{ 'INTEGRATIONS.TYPE' | translate }}
 845                               </th>
 846                               <th md-column>
 847                                 {{ 'INTEGRATIONS.CONTENT' | translate }}
 848                               </th>
 849                               <th md-column width="10px"></th>
 850                             </tr>
 851                           </thead>
 852                           <tbody md-body>
 853                             <tr
 854                               md-row
 855                               md-select="field"
 856                               md-select-id="id"
 857                               ng-repeat="field in vm_cc.fields | filter: vm_cc.query.field"
 858                             >
 859                               <td
 860                                 ng-click="vm_cc.createOrEditField($event, field)"
 861                                 md-cell
 862                                 class="id"
 863                               >
 864                                 {{field.id}}
 865                               </td>
 866                               <td
 867                                 ng-click="vm_cc.createOrEditField($event, field)"
 868                                 md-cell
 869                                 class="type"
 870                               >
 871                                 <span ng-if="field.FieldId"
 872                                   >{{field.nameField || field.idField}}</span
 873                                 >
 874                                 <span ng-if="!field.FieldId"
 875                                   >{{field.type}}</span
 876                                 >
 877                               </td>
 878                               <td
 879                                 ng-switch="field.type"
 880                                 ng-click="vm_cc.createOrEditField($event, field)"
 881                                 md-cell
 882                               >
 883                                 <span ng-switch-when="string"
 884                                   >{{field.content}}</span
 885                                 >
 886                                 <span
 887                                   ng-switch-when="variable"
 888                                   class="text-boxed"
 889                                   >{{field.variableName}}</span
 890                                 >
 891                                 <span
 892                                   ng-switch-when="customVariable"
 893                                   class="text-boxed"
 894                                   >{{ vm_cc.variablesById[field.VariableId].name
 895                                   }}</span
 896                                 >
 897                                 <span ng-switch-when="keyValue">
 898                                   {{field.key}}
 899                                   <span ng-switch="description.keyType">
 900                                     <span ng-switch-when="string"
 901                                       >{{field.keyContent}}</span
 902                                     >
 903                                     <span
 904                                       ng-switch-when="variable"
 905                                       class="text-boxed"
 906                                       >{{field.variableName}}</span
 907                                     >
 908                                     <span
 909                                       ng-switch-when="customVariable"
 910                                       class="text-boxed"
 911                                       >{{
 912                                       vm_cc.variablesById[field.VariableId].name
 913                                       }}</span
 914                                     >
 915                                   </span>
 916                                 </span>
 917                                 <span ng-switch-default>{{field.content}}</span>
 918                               </td>
 919                               <td
 920                                 md-cell
 921                                 class="actions"
 922                                 ng-if="!vm_cc.crudPermissions.readOnly"
 923                               >
 924                                 <md-menu>
 925                                   <md-button
 926                                     class="md-icon-button"
 927                                     aria-label="More"
 928                                     translate
 929                                     translate-attr-aria-label="INTEGRATIONS.MORE"
 930                                     ng-click="$mdOpenMenu($event)"
 931                                   >
 932                                     <md-icon
 933                                       md-font-icon="icon-dots-vertical"
 934                                     ></md-icon>
 935                                   </md-button>
 936
 937                                   <md-menu-content width="3">
 938                                     <md-menu-item
 939                                       ng-if="vm_cc.crudPermissions.canEdit"
 940                                     >
 941                                       <md-button
 942                                         ng-click="vm_cc.createOrEditField($event, field)"
 943                                         translate="INTEGRATIONS.EDIT_FIELD"
 944                                       >
 945                                         Edit Field
 946                                       </md-button>
 947                                     </md-menu-item>
 948                                     <md-menu-item
 949                                       ng-if="vm_cc.crudPermissions.canDelete"
 950                                     >
 951                                       <md-button
 952                                         ng-click="vm_cc.deleteFieldConfirm($event, field)"
 953                                         translate="INTEGRATIONS.DELETE_FIELD"
 954                                       >
 955                                         Delete Field
 956                                       </md-button>
 957                                     </md-menu-item>
 958                                   </md-menu-content>
 959                                 </md-menu>
 960                               </td>
 961                             </tr>
 962                           </tbody>
 963                         </table>
 964                       </md-table-container>
 965                     </md-tab-body>
 966                   </md-tab>
 967
 968                   <md-tab>
 969                     <md-tab-label>
 970                       <span translate="INTEGRATIONS.ADVANCED">ADVANCED</span>
 971                     </md-tab-label>
 972                     <md-tab-body>
 973                       <div layout-margin>
 974                         <label translate="INTEGRATIONS.MODULE_SEARCH"></label>
 975                         <md-select
 976                           ng-model="vm_cc.zohoConfiguration.moduleSearch"
 977                           ng-change="vm_cc.selectChangedAdvanced()"
 978                           ng-disabled="!vm_cc.crudPermissions.canEdit"
 979                         >
 980                           <md-option
 981                             ng-value="option.key"
 982                             ng-repeat="option in [{key: 'contact_lead', value: 'Contact & Lead'}, {key: 'contact', value: 'Contact'}, {key: 'lead', value: 'Lead'}]"
 983                             >{{ option.value }}</md-option
 984                           >
 985                         </md-select>
 986                       </div>
 987                       <div layout-margin>
 988                         <label translate="INTEGRATIONS.MODULE_CREATE"></label>
 989                         <md-select
 990                           ng-model="vm_cc.zohoConfiguration.moduleCreate"
 991                           ng-change="vm_cc.selectChangedAdvanced()"
 992                           ng-disabled="!vm_cc.crudPermissions.canEdit"
 993                         >
 994                           <md-option
 995                             ng-value="option.key"
 996                             ng-repeat="option in [{key: 'nothing', value: 'Nothing'}, {key: 'contact', value: 'Contact'}, {key: 'lead', value: 'Lead'}]"
 997                             >{{ option.value }}</md-option
 998                           >
 999                         </md-select>
1000                       </div>
1001                     </md-tab-body>
1002                   </md-tab>
1003                 </md-tabs>
1004                 <div
1005                   class="padding-20"
1006                   ng-if="!vm_cc.configurations.length && vm_cc.crudPermissions.canEdit"
1007                   ng-click="vm_cc.createOrEditZohoConfiguration($event)"
1008                   layout="row"
1009                   layout-sm="column"
1010                   layout-align="center center"
1011                   layout-wrap
1012                 >
1013                   <div
1014                     class="padding-20 md-whiteframe-3dp md-accent-bg"
1015                     layout="column"
1016                     layout-align="center center"
1017                   >
1018                     <md-button class="md-icon-button">
1019                       <md-icon md-font-icon="icon-plus"></md-icon>
1020                     </md-button>
1021                     <span
1022                       aria-label="add configuration"
1023                       translate
1024                       translate-attr-label="INTEGRATIONS.ADD_CONFIGURATION"
1025                       >ADD CONFIGURATION</span
1026                     >
1027                   </div>
1028                 </div>
1029               </md-card>
1030             </div>
1031           </div>
1032         </md-tab-body>
1033       </md-tab>
1034     </md-tabs>
1035   </div>
1036   <!-- / CONTENT -->
1037 </div>